
{% extends "base.html" %}

{% block content %}

        <script>
        $(document).ready(function(){
            // Pre-populated initial data at page load
            var content_data = {{ content_data }};

            var refresh = function() {
                $.get("/health_data", function(data) {
                    _.extend(content_data, data);
                    setTimeout(refresh, 5000);
                });
            };
            setTimeout(refresh, 5000);

            rivets.formatters.mon_summary = function(mon_status) {
                var result = mon_status.monmap.mons.length.toString() + " (quorum ";
                result += mon_status.quorum.join(", ");
                result += ")";

                return result;
            };

            rivets.formatters.log_color = function(log_line) {
                if (log_line.priority == "[INF]") {
                    return "color: #000000";
                } else if (log_line.priority == "[WRN]") {
                    return "color: #FFC200";
                } else if (log_line.priority == "[ERR]") {
                    return "color: #FF2222";
                } else {
                    return "";
                }
            };

            rivets.formatters.osd_summary = function(osd_map) {
                var in_count = 0;
                var up_count = 0;
                $.each(osd_map.osds, function(i, osd) {
                    if (osd.in) {
                        in_count++;
                    }
                    if (osd.up) {
                        up_count++;
                    }
                });

                return osd_map.osds.length + " (" + up_count + " up, " + in_count + " in)";
            };

            rivets.formatters.pg_status_style = function(pg_status) {
                var unhealthy = false;
                var scrubbing = false;
                $.each(pg_status, function(state, count) {
                    if (state == "active+clean") {

                    } else if (state == "active+clean+scrubbing"
                    || state == "active+clean+scrubbing+deep") {
                        scrubbing = true;
                    } else {
                        unhealthy = true;
                    }
                });

                if (unhealthy) {
                    return "color: #FFC200";
                } else if (scrubbing) {
                    return "color: #0000bb";
                } else {
                    return "color: #00bb00";
                }
            };

            rivets.formatters.pg_status = function(pg_status) {
                var strings = [];
                $.each(pg_status, function(state, count) {
                    strings.push(count + " " + state);
                });

                return strings.join(", ");
            };

            rivets.bind($("#content"), content_data);
        });
    </script>


    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Health
      </h1>

    </section>

    <!-- Main content -->
    <section class="content">

    Overall status: <span rv-style="health.overall_status | health_color">{health.overall_status}</span>

    <ul>
        <li rv-each-summary="health.summary">
            {summary.severity}: {summary.summary}
        </li>
    </ul>

        <div class="row">
            <div class="col-sm-3">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i
                            class="fa fa-database"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Monitors</span>
                        <span class="info-box-number">{mon_status | mon_summary}</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
            </div>

            <div class="col-sm-3">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i
                            class="fa fa-hdd-o"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">OSDs</span>
                        <span class="info-box-number">{osd_map | osd_summary}</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
            </div>
        </div>

        <div class="box">
            <div class="box-header">
                Pools
            </div>
            <div class="box-body">

                <table class="table table-condensed">
                    <thead>
                    <th>Name</th>
                    <th>PG status</th>
                    <th>Usage</th>
                    <th>Activity</th>
                    </thead>
                    <tbody>
                    <tr rv-each-pool="pools">
                        <td style="text-align: right;">
                            {pool.pool_name}
                        </td>
                        <td rv-style="pool.pg_status | pg_status_style">
                            {pool.pg_status | pg_status}
                        </td>
                        <td>
                            {pool.stats.bytes_used.latest | dimless} /
                            {pool.stats.max_avail.latest | dimless }
                        </td>
                        <td>
                            {pool.stats.rd_bytes.rate | dimless } rd, {
                            pool.stats.wr_bytes.rate | dimless } wr
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <div class="box">
            <div class="box-header">
                Cluster log
            </div>
            <div class="box-body">
                <ul class="nav nav-tabs">
                  <li class="active"><a data-toggle="tab" href="#clog">Cluster log</a></li>
                  <li><a data-toggle="tab" href="#audit_log">Audit log</a></li>
                </ul>
                <div class="tab-content" style="font-family:monospace; background-color: #ddd; color: #333">
                    <div id="clog" class="tab-pane fade in active">
                        <span>
                            <span rv-each-line="clog">
                                { line.stamp }&nbsp;{line.priority}&nbsp;
                                <span  rv-style="line | log_color">
                                    <span style="font-weight: bold;">
                                        { line.message }
                                    </span><br>
                                </span>
                            </span>
                        </span>
                    </div>
                    <div id="audit_log" class="tab-pane fade in">
                        <span>
                            <span rv-each-line="audit_log">
                                { line.stamp }&nbsp;{line.priority}&nbsp;
                                <span  rv-style="line | log_color">
                                    <span style="font-weight: bold;">
                                        { line.message }
                                    </span><br>
                                </span>
                            </span>
                        </span>

                    </div>
                </div>

            </div>

        </div>

        <!--

    cluster ac15351a-571b-4393-9c71-815fc98dacd6
     health HEALTH_WARN
            noin,sortbitwise,require_jewel_osds,require_kraken_osds flag(s) set
     monmap e2: 3 mons at {a=192.168.1.7:6789/0,b=192.168.1.7:6790/0,c=192.168.1.7:6791/0}
            election epoch 6, quorum 0,1,2 a,b,c
      fsmap e9: cephfs_a-1/1/1 up cephfs_b-1/1/1 up {[cephfs_a:0]=a=up:active,[cephfs_b:0]=d=up:active}, 2 up:standby
        mgr active: x
     osdmap e17: 3 osds: 3 up, 3 in
            flags noin,sortbitwise,require_jewel_osds,require_kraken_osds
      pgmap v115: 40 pgs, 5 pools, 4296 bytes data, 40 objects
            279 GB used, 205 GB / 485 GB avail
                  40 active+clean
                  -->


    </section>

{% endblock %}
